<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命名（具名）插槽</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <hr>
  <cpn>
    <template v-slot:s1>
      <h2>Hi, Vue</h2>
    </template>


  </cpn>
  <hr>
  <cpn>
    <template v-slot:s1>
      <h2>Hi, Vue</h2>
      <h2>您好, Vue</h2>
    </template>
  </cpn>
</div>

<template id="cpn">
  <h1>世界，你好！</h1>
  <h1>Hello, World!</h1>
  <!--  slot 标签仅作为占位符的形式出现  -->
  <!--  如果 slot 标签 有内容，并且使用的过程中，没有传入内容的话，会默认进行显示 -->
  <slot name="s1">
    <div>这个内容在使用的过程中可能被替换掉</div>
  </slot>
  <h1>Vue，你好！</h1>
  <h1>Hello, Vue!</h1>
  <slot>
    <div>这个内容在使用的过程中可能被替换掉</div>
  </slot>
</template>

<script type="module">
  import {createApp} from "../../../../js/vue.esm-browser.js";
  import {defineComponent} from "../../../../js/vue.esm-browser.js";


  let cpn = defineComponent(
          {
            template: "#cpn",
          }
  );

  let app = createApp(
          {
            setup() {

            },
            components: {
              cpn,
            }
          }
  )

  app.mount("#app")
</script>
</body>
</html>
</html>